<template>
  <a-card title="糖尿病并发症" :bordered="false">
    <a-spin :spinning="loading">
      <a-tabs tab-position="top" v-model="active">
        <a-tab-pane key="1" tab="糖尿病肾病" class="tab-bg-color">
          <DiabeticNephropathy ref="complication1" :complication="currentPatient" @save="onSave" @confirm="confirm" />
        </a-tab-pane>

        <a-tab-pane key="2" tab="糖尿病视网膜病变" class="tab-bg-color">
          <DiabeticRetinopathy ref="complication2" :complication="currentPatient" @save="onSave" @confirm="confirm" />
        </a-tab-pane>

        <a-tab-pane key="3" tab="糖尿病周围神经病变" class="tab-bg-color">
          <DiabeticPeripheralNeuropathy
            ref="complication3"
            :complication="currentPatient"
            @save="onSave"
            @confirm="confirm"
          />
        </a-tab-pane>

        <a-tab-pane key="4" tab="心血管自主神经病变" class="tab-bg-color">
          <CardiovascularAutonomicNeuropathy
            ref="complication4"
            :complication="currentPatient"
            @save="onSave"
            @confirm="confirm"
          />
        </a-tab-pane>

        <a-tab-pane key="5" tab="消化系统自主神经病变" class="tab-bg-color">
          <DigestiveSystem ref="complication5" :complication="currentPatient" @save="onSave" @confirm="confirm" />
        </a-tab-pane>

        <a-tab-pane key="6" tab="泌尿生殖系统自主神经病变" class="tab-bg-color">
          <GenitourinarySystem ref="complication6" :complication="currentPatient" @save="onSave" @confirm="confirm" />
        </a-tab-pane>

        <a-tab-pane key="7" tab="其他自主神经病变" class="tab-bg-color">
          <Other ref="complication7" :complication="currentPatient" @save="onSave" @confirm="confirm" />
        </a-tab-pane>

        <a-tab-pane key="8" tab="糖尿病下肢血管病变" class="tab-bg-color">
          <LowerExtremityVascularDisease
            ref="complication8"
            :complication="currentPatient"
            @save="onSave"
            @confirm="confirm"
          />
        </a-tab-pane>

        <a-tab-pane key="9" tab="糖尿病足" class="tab-bg-color">
          <DiabeticFoot ref="complication9" :complication="currentPatient" @save="onSave" @confirm="confirm" />
        </a-tab-pane>

        <a-tab-pane key="10" tab="酮症酸中毒(DKA)" class="tab-bg-color">
          <Ketoacidosis ref="complication10" :complication="currentPatient" @save="onSave" @confirm="confirm" />
        </a-tab-pane>

        <a-tab-pane key="11" tab="糖尿病高渗综合征(HHS)" class="tab-bg-color">
          <DiabeticHyperosmolarSyndrome
            ref="complication11"
            :complication="currentPatient"
            @save="onSave"
            @confirm="confirm"
          />
        </a-tab-pane>
      </a-tabs>
    </a-spin>
  </a-card>
</template>

<script>
import { PAGE_MENU_TYPE } from '@/store/mutation-types'
import { getAction, postAction } from '@/api/manage'
import DiabeticNephropathy from './complication/DiabeticNephropathy'
import DiabeticRetinopathy from './complication/DiabeticRetinopathy.vue'
import DiabeticPeripheralNeuropathy from './complication/DiabeticPeripheralNeuropathy'
import CardiovascularAutonomicNeuropathy from './complication/CardiovascularAutonomicNeuropathy'
import DigestiveSystem from './complication/DigestiveSystem'
import GenitourinarySystem from './complication/GenitourinarySystem'
import Other from './complication/Other'
import LowerExtremityVascularDisease from './complication/LowerExtremityVascularDisease'
import DiabeticFoot from './complication/DiabeticFoot.vue'
import Ketoacidosis from './complication/Ketoacidosis'
import DiabeticHyperosmolarSyndrome from './complication/DiabeticHyperosmolarSyndrome'

export default {
  name: 'Complication',
  components: {
    DiabeticNephropathy,
    DiabeticRetinopathy,
    DiabeticPeripheralNeuropathy,
    CardiovascularAutonomicNeuropathy,
    DigestiveSystem,
    GenitourinarySystem,
    Other,
    LowerExtremityVascularDisease,
    DiabeticFoot,
    Ketoacidosis,
    DiabeticHyperosmolarSyndrome
  },
  data() {
    return {
      url: {
        getComplication: '102/16/1021602',
        updateComplication: '102/16/1021601',
        confirmomplication: '102/10/1021603'
      },
      loading: true,
      active: '1',
      type: '1',
      currentPatient: {},
      text: '此操作代表你已完成了页面的填写，是否继续？'
    }
  },
  created() {
    this.getPatientInfo()
  },
  methods: {
    confirm(type) {
      let patientId = this.$route.query[PAGE_MENU_TYPE.PatientId]
      let params = {
        patientId: patientId,
        isFinished: 1,
        type
      }
      postAction(this.url.confirmomplication, params)
        .then(res => {
          if (res.success) {
            this.$message.success('页面已确认', 5)
            type != '11' && (this.active = JSON.stringify(+type + 1))
          }
        })
        .finally(_ => {
          this.$refs['complication' + type].saveLoading = false
        })
    },
    getPatientInfo() {
      let patientId = this.$route.query[PAGE_MENU_TYPE.PatientId]

      getAction(this.url.getComplication, { patientId })
        .then(res => {
          if (res.success) {
            this.currentPatient = res.result
            console.log(this.currentPatient)
            console.log('成功获取患者糖尿病并发症信息')
          } else {
            console.log('获取患者糖尿病并发症信息失败，自动为该患者新建一个空档案')
            postAction(this.url.updateComplication, {
              patientId: patientId
            }).then(newRecord => {
              if (newRecord.success) {
                this.getPatientInfo()
                console.log(newRecord)
              } else {
              }
            })
          }
        })
        .finally(_ => {
          this.loading = false
        })
    },
    onSave(type) {
      const params = JSON.parse(JSON.stringify(this.currentPatient))
      postAction(this.url.updateComplication, params)
        .then(res => {
          if (res.success) {
            console.log(res)
            this.$message.success('操作成功')
            type != '11' && (this.active = JSON.stringify(+type + 1))
          } else {
            this.$message.error('操作失败')
          }
        })
        .finally(_ => {
          this.$refs['complication' + type].saveLoading = false
        })
    }
  }
}
</script>

<style lang="less" scoped>
.tab-bg-color {
  padding: 15px;
}
</style>

